<template>
  <div class="tracetask-container">
    <v-layout wrap justify-center align-center>
      <v-flex md12 d-flex>
        <v-flex md2 px-2>
          <v-menu offset-x full-width>
            <v-text-field
              color="primary"
              slot="activator"
              v-model="queryForm.beginTime"
              :placeholder="$t('base.beginTime')"
              disabled
            ></v-text-field>
            <v-date-picker
              landscape
              min="2019-07-01"
              :first-day-of-week="0"
              locale="zh-cn"
              v-model="queryForm.beginTime"
              color="secondary"
            ></v-date-picker>
          </v-menu>
        </v-flex>
        <v-flex md2 px-2>
          <v-menu offset-x full-width>
            <v-text-field
              color="primary"
              slot="activator"
              v-model="queryForm.endTime"
              :placeholder="$t('base.endTime')"
              disabled
            ></v-text-field>
            <v-date-picker
              landscape
              min="2019-07-01"
              :first-day-of-week="0"
              locale="zh-cn"
              v-model="queryForm.endTime"
              color="secondary"
            ></v-date-picker>
          </v-menu>
        </v-flex>
        <!-- <v-flex md2 px-2>
          <v-select :items="buyerStatus" v-model="queryForm.checkStatus" label="审核状态"></v-select>
        </v-flex> -->

        <v-flex md2 px-2>
          <v-btn round class="subTitle" color="primary" @click="onQuery">
            <span>{{ $t('task.query')}}</span>
            <v-icon>search</v-icon>
          </v-btn>
        </v-flex>
      </v-flex>

      <!-- table -->
      <v-flex md12 class="elevation-1">
        <v-data-table :headers="headers" :loading="loading" :items="tableData" hide-actions>
          <template v-slot:items="props">
            <td class="text-xs-center">{{ props.item.profitId }}</td>
            <td class="text-xs-center">{{ props.item.type | IncomeType }}</td>
            <td class="text-xs-center">{{ props.item.payType | PayMethod }}</td>
            <td class="text-xs-center">{{ props.item.amount }}</td>
            <!-- <td class="text-xs-center">{{ props.item.incomeNo  }}</td> -->
            <!-- <td class="text-xs-center">{{ props.item.checkStatus |  }}</td> -->
            <td class="text-xs-center">{{ props.item.balance }}</td>
            <td class="text-xs-center">{{ props.item.remark }}</td>
            <!-- <td class="text-xs-center">{{ props.item.checkStatus | TopupStatus }}</td> -->
            <td class="text-xs-center">{{ getTime(props.item.createTime) }}</td>
          </template>
          <template v-slot:no-data>
            <v-alert :value="true" outline color="warning" icon="info">{{ $t('base.nodata') }}</v-alert>
          </template>
        </v-data-table>

        <v-layout class="pagination-wrapper">
          <v-flex md10 d-flex justify-start align-center>
            <v-flex d-flex md2 justify-start align-center>
              <v-flex md4 class="title-color">{{ $t('base.display') }}</v-flex>
              <v-flex md4>
                <v-select :items="pageOptions" v-model="pagination.limit"></v-select>
              </v-flex>
              <v-flex md4 class="title-color">{{ $t('base.limit') }}</v-flex>
            </v-flex>
            <v-flex
              md2
              class="title-color"
            >{{ $t('base.allTog') }} {{ pagination.pageCount }} {{ $t('base.itemData') }}</v-flex>
            <v-flex md2></v-flex>
            <v-flex md4>
              <v-pagination
                @input="onPageChange"
                :length="pagination.pageCount"
                circle
                total-visible="5"
                v-model="pagination.page"
              ></v-pagination>
            </v-flex>
            <v-flex md2></v-flex>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
  </div>
</template>


<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";
import { Task, Bill } from "@/api";
import { forEach } from "lodash";
import { KV } from "@/utils/type";
import { PageOptions, TopupStatusKV } from "@/utils/constants";
import { ReqProfitIncome, ProfitLogRequest } from "@/api/bean";
import { getTime } from "@/utils/commonUtils";
import  Cookie from 'js-cookie';
declare const $Vue: Vue;

@Component
export default class MyBills extends Vue {
  private pageOptions: any = [];
  private buyerStatus: any = TopupStatusKV;

  private queryForm: any = {
    beginTime: "",
    endTime: "",
    // type: -2,

  };

  private headers: Array<any> = [];

  private tableData: any = [
    {
      taskId: "123"
    }
  ];

  private loading: boolean = false;
  private dialog: boolean = false;
  private dialogItem: any = {};
  private isQuery: boolean = false;

  private pagination: any = {
    pageCount: 20,
    page: 1,
    limit: 10,
    offset: 0
  };

  private getTime(date: string) {
    return getTime(date);
  }

  protected mounted() {
    this.getMyBillList();
    $Vue.$emit("balance");

    $Vue.$emit("title", { message: this.$t("base.mybills").toString() });
    this.pageOptions = PageOptions.slice();

    this.headers = [
      {
        text: this.$t("financial.serial").toString(),
        align: "center",
        sortable: false,
        value: "serial"
      },
      {
        text: this.$t("financial.type").toString(),
        align: "center",
        sortable: false,
        value: "type"
      },
      {
        text: this.$t("financial.method").toString(),
        align: "center",
        sortable: false,
        value: "method"
      },
      {
        text: this.$t("financial.amount"),
        align: "center",
        sortable: false,
        value: "amount"
      },
      // {
      //   text: '交易号',
      //   align: "center",
      //   sortable: false,
      //   value: "amount"
      // },
      {
        text: this.$t("financial.balance"),
        align: "center",
        sortable: false,
        value: "balance"
      },
      {
        text: this.$t("financial.remark"),
        align: "center",
        sortable: false,
        value: "remark"
      },
      // {
      //   text: '审核状态',
      //   align: "center",
      //   sortable: false,
      //   value: "remark"
      // },
      {
        text: this.$t("financial.time"),
        align: "center",
        sortable: false,
        value: "time"
      }
    ];
  }

  private onQuery(from?: string) {
    let params: any = {};

    let valid = 0;
    forEach(this.queryForm, (item, key) => {
      item ? (params[key] = item) : valid++;
    });
    if (valid === 3) {
      return $Vue.$emit("snackbar", {
        message: "请至少填写一个查询条件"
      });
    }

    if (from === undefined) {
      this.pagination.offset = 0;
      this.pagination.page = 1;
    }

    if (this.queryForm.beginTime && this.queryForm.endTime) {
      if (
        new Date(this.queryForm.beginTime).getTime() >
        new Date(this.queryForm.endTime).getTime()
      ) {
        return $Vue.$emit("snackbar", {
          text: "起始日期不能早于结束日期"
        });
      }
      params.endTime = new Date(this.queryForm.endTime + " 23:59:59").getTime();
      params.beginTime = new Date(
        this.queryForm.beginTime + " 00:00:00"
      ).getTime();
    } else if (this.queryForm.beginTime || this.queryForm.endTime) {
      return $Vue.$emit("snackbar", {
        text: "请选择完整起止日期"
      });
    }
    params.limit = this.pagination.limit;
    params.offset = this.pagination.offset;
    this.isQuery = true;
    this.getMyBillList(params);
  }

  private onPageChange(value: any) {
    let limit = this.pagination.limit;
    this.pagination.offset = (value - 1) * limit;
    if (!this.isQuery) {
      this.getMyBillList();
    } else {
      this.onQuery("wyvonj");
    }
  }

  private validate() {}

  /**
   * 我的账单
   */
  private async getMyBillList(queryForm?: any) {
    let params: ProfitLogRequest = {
      offset: this.pagination.offset,
      limit: this.pagination.limit,
      userId: Number(Cookie.get("seller_userId"))
      // checkStatus: 1,
    };
    if (queryForm) {
      params.userId = Number(Cookie.get("seller_userId"));
      params = queryForm;
    }
    const { data } = await Bill.getProfitLogList.r(params);
    console.log("getProfitLogList", data);
    if (data.result === 0) {
      let $data = data.data;
      this.tableData = $data.dataList;

      this.pagination.pageCount = $data.totalCount
        ? Math.ceil($data.totalCount / this.pagination.limit)
        : 1;
    } else {
    }
  }
}
</script>

<style lang="less" scoped>
.tracetask-container {
  width: 100%;
  height: 100%;
}
.pagination-wrapper {
  background: white;
  border-top: 1px solid #d4d4d4;
}
</style>


